<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>代办事项</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style-type: none;
        box-sizing: border-box;
      }

      #box {
        width: 200px;
        margin: 50px auto;
      }
      #header {
        display: flex;
        justify-content: space-between;
      }
      ul li {
        width: 200px;
        display: flex;
        .text {
          width: 140px;
        }
      }
      .finish {
        background-color: #ccc;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="header">
        <input type="text" id="input" />
        <button id="add">添加</button>
      </div>
      <ul id="list"></ul>
    </div>

    <script>
      let inputEle = document.getElementById('input')
      let addEle = document.getElementById('add')
      let listEle = document.getElementById('list')
      let listStr = ``
      let comments = []

      // 从本地存储导入
      let comment = JSON.parse(localStorage.getItem('comments'))
      if (!comment) {
        comment = []
      } else {
        comment.forEach((item) => {
          listStr += `<li>
        <div class="text">${item}</div>
        <button>完成</button>
        <button>删除</button>
        </li>`
        })
        listEle.innerHTML += listStr
      }

      // 给添加按钮添加单击事件，将输入框中的值构造成li上树到ul中
      addEle.addEventListener('click', () => {
        let content = inputEle.value.trim()
        if (!content) {
          alert('不能添加空的待办事项')
          return
        }
        listStr = `<li>
        <div class="text">${content}</div>
        <button>完成</button>
        <button>删除</button>
        </li>`
        listEle.innerHTML += listStr
        inputEle.value = ''

        // 存入本地存储
        comments.push(content)
        localStorage.setItem('comments', JSON.stringify(comments))
      })
      // 给ul绑定委托
      listEle.addEventListener('click', function (event) {
        // 完成与撤销的功能转换
        if (event.target.innerText === '完成') {
          event.target.previousElementSibling.classList.add('finish')
          event.target.innerText = '撤销'
        } else if (event.target.innerText === '撤销') {
          event.target.previousElementSibling.classList.remove('finish')
          event.target.innerText = '完成'
        }

        // 删除
        if (event.target.innerHTML === '删除') {
          if (event.target.previousElementSibling.innerText === '撤销') {
            return
          }
          alert('确定删除吗')
          event.target.parentElement.remove()
          let text =
            event.target.previousElementSibling.previousElementSibling.innerText
          //   先将本地存储的内容拿出来
          let newComment = JSON.parse(localStorage.getItem('comments'))
          // 过滤掉本地存储中的text
          newComment = newComment.filter((item) => item !== text)
          localStorage.setItem('comments', JSON.stringify(newComment))
        }
      })
    </script>
  </body>
</html>
